రియాక్ట్ రహస్య సూత్రం: రికన్సిలియేషన్ అల్గారిథమ్ మరియు వర్చువల్ DOM డిఫింగ్‌పై ఒక లోతైన విశ్లేషణ

` ఈ విధంగా సూచించబడవచ్చు:

{ type: 'div', props: { className: 'container', children: 'Hello World' } }

ఇవి కేవలం జావాస్క్రిప్ట్ ఆబ్జెక్ట్‌లు కాబట్టి, వాటిని సృష్టించడం మరియు మానిప్యులేట్ చేయడం చాలా వేగంగా ఉంటుంది. ఇందులో బ్రౌజర్ APIలతో ఎటువంటి పరస్పర చర్య ఉండదు, కాబట్టి రిఫ్లోలు లేదా రీపెయింట్‌లు ఉండవు.

వర్చువల్ DOM ఎలా పనిచేస్తుంది?

VDOM, UI డెవలప్‌మెంట్‌కు ఒక డిక్లరేటివ్ విధానాన్ని అనుమతిస్తుంది. బ్రౌజర్‌కు DOMను దశలవారీగా ఎలా మార్చాలో చెప్పే బదులు (ఇంపరేటివ్), మీరు ఒక నిర్దిష్ట స్టేట్ కోసం UI ఎలా ఉండాలో ప్రకటిస్తారు (డిక్లరేటివ్). మిగిలినది రియాక్ట్ చూసుకుంటుంది.

ప్రక్రియ ఈ క్రింది విధంగా ఉంటుంది:

1. ప్రారంభ రెండర్: మీ అప్లికేషన్ మొదటిసారి లోడ్ అయినప్పుడు, రియాక్ట్ మీ UI కోసం ఒక పూర్తి వర్చువల్ DOM ట్రీని సృష్టిస్తుంది మరియు దానిని ఉపయోగించి ప్రారంభ నిజమైన DOMను ఉత్పత్తి చేస్తుంది.
2. స్టేట్ అప్‌డేట్: అప్లికేషన్ యొక్క స్టేట్ మారినప్పుడు (ఉదా., వినియోగదారు ఒక బటన్‌ను క్లిక్ చేసినప్పుడు), రియాక్ట్ కొత్త స్టేట్‌ను ప్రతిబింబించే ఒక కొత్త వర్చువల్ DOM ట్రీని సృష్టిస్తుంది.
3. డిఫింగ్: ఇప్పుడు రియాక్ట్ మెమరీలో రెండు వర్చువల్ DOM ట్రీలను కలిగి ఉంటుంది: పాతది (స్టేట్ మార్పుకు ముందు) మరియు కొత్తది. ఆ తర్వాత అది ఈ రెండు ట్రీలను పోల్చి, కచ్చితమైన తేడాలను గుర్తించడానికి దాని "డిఫింగ్" అల్గారిథమ్‌ను నడుపుతుంది.
4. బ్యాచ్ చేయడం మరియు అప్‌డేట్ చేయడం: రియాక్ట్ నిజమైన DOMను కొత్త వర్చువల్ DOMతో సరిపోల్చడానికి అవసరమైన అత్యంత సమర్థవంతమైన మరియు కనీస ఆపరేషన్‌ల సెట్‌ను లెక్కిస్తుంది. ఈ ఆపరేషన్‌లు ఒకే, ఆప్టిమైజ్ చేయబడిన క్రమంలో నిజమైన DOMకు వర్తింపజేయబడతాయి.

అప్‌డేట్‌లను బ్యాచ్ చేయడం ద్వారా, రియాక్ట్ నెమ్మదిగా ఉండే DOMతో ప్రత్యక్ష పరస్పర చర్యను తగ్గిస్తుంది, పనితీరును గణనీయంగా మెరుగుపరుస్తుంది. ఈ సామర్థ్యం యొక్క ప్రధాన భాగం "డిఫింగ్" దశలో ఉంది, దీనిని అధికారికంగా రికన్సిలియేషన్ అల్గారిథమ్ అని పిలుస్తారు.

రియాక్ట్ యొక్క గుండె: రికన్సిలియేషన్ అల్గారిథమ్

రికన్సిలియేషన్ అనేది రియాక్ట్, DOMను తాజా కాంపోనెంట్ ట్రీకి సరిపోయేలా అప్‌డేట్ చేసే ప్రక్రియ. ఈ పోలికను చేసే అల్గారిథమ్‌ను మనం "డిఫింగ్ అల్గారిథమ్" అని పిలుస్తాము.

సిద్ధాంతపరంగా, ఒక ట్రీని మరొకదానికి మార్చడానికి అవసరమైన కనీస మార్పులను కనుగొనడం చాలా సంక్లిష్టమైన సమస్య, దీని అల్గారిథమ్ సంక్లిష్టత O(n³) క్రమంలో ఉంటుంది, ఇక్కడ n అనేది ట్రీలోని నోడ్‌ల సంఖ్య. ఇది వాస్తవ-ప్రపంచ అనువర్తనాలకు చాలా నెమ్మదిగా ఉంటుంది. దీనిని పరిష్కరించడానికి, రియాక్ట్ బృందం వెబ్ అప్లికేషన్‌లు సాధారణంగా ఎలా ప్రవర్తిస్తాయనే దానిపై కొన్ని అద్భుతమైన పరిశీలనలు చేసి, చాలా వేగంగా పనిచేసే ఒక హ్యూరిస్టిక్ అల్గారిథమ్‌ను అమలు చేసింది—ఇది O(n) సమయంలో పనిచేస్తుంది.

హ్యూరిస్టిక్స్: డిఫింగ్‌ను వేగంగా మరియు ఊహించదగినదిగా చేయడం

రియాక్ట్ యొక్క డిఫింగ్ అల్గారిథమ్ రెండు ప్రాథమిక అంచనాలు లేదా హ్యూరిస్టిక్స్‌పై నిర్మించబడింది:

హ్యూరిస్టిక్ 1: విభిన్న ఎలిమెంట్ రకాలు విభిన్న ట్రీలను ఉత్పత్తి చేస్తాయి

ఇది మొదటి మరియు అత్యంత సూటియైన నియమం. రెండు VDOM నోడ్‌లను పోల్చినప్పుడు, రియాక్ట్ మొదట వాటి రకాన్ని చూస్తుంది. రూట్ ఎలిమెంట్ల రకం భిన్నంగా ఉంటే, డెవలపర్ ఒకదానిని మరొకదానికి మార్చడానికి ప్రయత్నించడం లేదని రియాక్ట్ ఊహిస్తుంది. బదులుగా, ఇది మరింత తీవ్రమైన కానీ ఊహించదగిన విధానాన్ని తీసుకుంటుంది:

• ఇది పాత ట్రీ మొత్తాన్ని కూల్చివేస్తుంది, పాత కాంపోనెంట్లన్నింటినీ అన్‌మౌంట్ చేసి, వాటి స్టేట్‌ను నాశనం చేస్తుంది.
• ఇది కొత్త ఎలిమెంట్ రకం ఆధారంగా మొదటి నుండి పూర్తిగా కొత్త ట్రీని నిర్మిస్తుంది.

ఉదాహరణకు, ఈ మార్పును పరిగణించండి:

ముందు: <div><Counter /></div>
తర్వాత: <span><Counter /></span>

చైల్డ్ `Counter` కాంపోనెంట్ ఒకటే అయినప్పటికీ, రూట్ `div` నుండి `span`కు మారిందని రియాక్ట్ చూస్తుంది. ఇది పాత `div` మరియు దానిలోని `Counter` ఇన్‌స్టాన్స్‌ను పూర్తిగా అన్‌మౌంట్ చేస్తుంది (దాని స్టేట్‌ను కోల్పోతుంది) ఆపై ఒక కొత్త `span` మరియు `Counter` యొక్క సరికొత్త ఇన్‌స్టాన్స్‌ను మౌంట్ చేస్తుంది.

ముఖ్య గమనిక: మీరు ఒక కాంపోనెంట్ సబ్‌ట్రీ యొక్క స్టేట్‌ను కాపాడుకోవాలనుకుంటే లేదా ఆ సబ్‌ట్రీ యొక్క పూర్తి రీ-రెండర్‌ను నివారించాలనుకుంటే, దాని రూట్ ఎలిమెంట్ రకాన్ని మార్చడం మానుకోండి.

హ్యూరిస్టిక్ 2: డెవలపర్లు `key` ప్రాప్‌తో స్థిరమైన ఎలిమెంట్లను సూచించగలరు

డెవలపర్లు అర్థం చేసుకోవడానికి మరియు సరిగ్గా వర్తింపజేయడానికి ఇది బహుశా అత్యంత కీలకమైన హ్యూరిస్టిక్. రియాక్ట్ చైల్డ్ ఎలిమెంట్ల జాబితాను పోల్చినప్పుడు, దాని డిఫాల్ట్ ప్రవర్తన రెండు జాబితాల పిల్లలను ఒకే సమయంలో ఇటరేట్ చేయడం మరియు తేడా ఉన్న చోటల్లా ఒక మ్యుటేషన్ను ఉత్పత్తి చేయడం.

ఇండెక్స్-ఆధారిత డిఫింగ్‌తో సమస్య

మనం ఒక ఐటెమ్స్ జాబితాను కలిగి ఉన్నామని మరియు కీలను ఉపయోగించకుండా జాబితా ప్రారంభంలో ఒక కొత్త ఐటెమ్‌ను జోడిస్తున్నామని ఊహించుకుందాం.

ప్రారంభ జాబితా:

• అంశం B
• అంశం C

నవీకరించబడిన జాబితా ('అంశం A'ను ప్రారంభంలో జోడించిన తర్వాత):

• అంశం A
• అంశం B
• అంశం C

కీలు లేకుండా, రియాక్ట్ ఒక సాధారణ, ఇండెక్స్-ఆధారిత పోలికను చేస్తుంది:

1. ఇది ఇండెక్స్ 0 వద్ద ఉన్న పాత అంశాన్ని ('అంశం B') ఇండెక్స్ 0 వద్ద ఉన్న కొత్త అంశంతో ('అంశం A') పోలుస్తుంది. అవి భిన్నంగా ఉన్నాయి, కాబట్టి ఇది మొదటి అంశాన్ని మ్యుటేట్ చేస్తుంది.
2. ఇది ఇండెక్స్ 1 వద్ద ఉన్న పాత అంశాన్ని ('అంశం C') ఇండెక్స్ 1 వద్ద ఉన్న కొత్త అంశంతో ('అంశం B') పోలుస్తుంది. అవి భిన్నంగా ఉన్నాయి, కాబట్టి ఇది రెండవ అంశాన్ని మ్యుటేట్ చేస్తుంది.
3. ఇది ఇండెక్స్ 2 వద్ద ఒక కొత్త అంశం ('అంశం C') ఉందని చూసి, దానిని చొప్పిస్తుంది.

ఇది చాలా అసమర్థమైనది. రియాక్ట్ రెండు అనవసరమైన మ్యుటేషన్‌లు మరియు ఒక ఇన్సర్షన్‌ను చేసింది, వాస్తవానికి ప్రారంభంలో ఒకే ఒక ఇన్సర్షన్ మాత్రమే అవసరం. ఈ జాబితా అంశాలు వాటి స్వంత స్టేట్‌తో కూడిన సంక్లిష్ట కాంపోనెంట్లు అయితే, ఇది తీవ్రమైన పనితీరు సమస్యలకు మరియు బగ్స్‌కు దారితీస్తుంది, ఎందుకంటే కాంపోనెంట్ల మధ్య స్టేట్ గందరగోళానికి గురికావచ్చు.

`key` ప్రాప్ యొక్క శక్తి

`key` ప్రాప్ ఒక పరిష్కారాన్ని అందిస్తుంది. ఇది మీరు ఎలిమెంట్ల జాబితాలను సృష్టించేటప్పుడు చేర్చాల్సిన ఒక ప్రత్యేక స్ట్రింగ్ అట్రిబ్యూట్. కీలు ప్రతి ఎలిమెంట్‌కు ఒక స్థిరమైన గుర్తింపును అందిస్తాయి.

అదే ఉదాహరణను తిరిగి చూద్దాం, కానీ ఈసారి స్థిరమైన, ప్రత్యేకమైన కీలతో:

ప్రారంభ జాబితా:

• అంశం B
• అంశం C

నవీకరించబడిన జాబితా:

• అంశం A
• అంశం B
• అంశం C

ఇప్పుడు, రియాక్ట్ యొక్క డిఫింగ్ ప్రక్రియ చాలా తెలివైనది:

1. రియాక్ట్ కొత్త జాబితా యొక్క పిల్లలను చూసి 'b' మరియు 'c' కీలతో ఉన్న ఎలిమెంట్లను కనుగొంటుంది.
2. 'b' మరియు 'c' కీలతో ఉన్న ఎలిమెంట్లు ఇప్పటికే పాత జాబితాలో ఉన్నాయని దానికి తెలుసు, కాబట్టి అది వాటిని కేవలం కదిలిస్తుంది.
3. ముందు లేని 'a' కీతో ఒక కొత్త ఎలిమెంట్ ఉందని అది చూసి, దానిని సృష్టించి చొప్పిస్తుంది.

ఇది చాలా సమర్థవంతమైనది. రియాక్ట్ కేవలం ఒక ఇన్సర్షన్‌ను మాత్రమే చేయాల్సి ఉందని సరిగ్గా గుర్తిస్తుంది. 'b' మరియు 'c' కీలతో అనుబంధించబడిన కాంపోనెంట్లు వాటి అంతర్గత స్టేట్‌ను నిలుపుకుంటూ భద్రపరచబడతాయి.

కీల కోసం క్లిష్టమైన నియమం: కీలు వాటి తోబుట్టువులలో స్థిరంగా, ఊహించదగినవిగా మరియు ప్రత్యేకంగా ఉండాలి. జాబితాను తిరిగి క్రమబద్ధీకరించినా, ఫిల్టర్ చేసినా, లేదా మధ్యలో అంశాలను జోడించినా/తొలగించినా, అర్రే ఇండెక్స్‌ను కీగా ఉపయోగించడం (`items.map((item, index) =>

...

)`) ఒక యాంటీ-ప్యాటర్న్, ఎందుకంటే ఇది కీ లేకపోవడం వల్ల వచ్చే సమస్యలనే కలిగిస్తుంది. మీ డేటా నుండి ప్రత్యేక ఐడెంటిఫైయర్‌లు, డేటాబేస్ ID వంటివి ఉత్తమ కీలు.

పరిణామం: స్టాక్ నుండి ఫైబర్ ఆర్కిటెక్చర్ వరకు

పైన వివరించిన రికన్సిలియేషన్ అల్గారిథమ్ చాలా సంవత్సరాలుగా రియాక్ట్‌కు పునాదిగా ఉంది. అయితే, దీనికి ఒక పెద్ద పరిమితి ఉంది: ఇది సింక్రోనస్ మరియు బ్లాకింగ్. ఈ అసలు అమలును ఇప్పుడు స్టాక్ రికన్సిలర్ అని పిలుస్తారు.

పాత విధానం: ది స్టాక్ రికన్సిలర్

స్టాక్ రికన్సిలర్‌లో, ఒక స్టేట్ అప్‌డేట్ రీ-రెండర్‌ను ప్రేరేపించినప్పుడు, రియాక్ట్ మొత్తం కాంపోనెంట్ ట్రీని పునరావృతంగా ప్రయాణించి, మార్పులను లెక్కించి, వాటిని DOMకు వర్తింపజేస్తుంది—అన్నీ ఒకే, అంతరాయం లేని క్రమంలో. చిన్న అప్‌డేట్‌లకు ఇది ఫర్వాలేదు. కానీ పెద్ద కాంపోనెంట్ ట్రీల కోసం, ఈ ప్రక్రియ గణనీయమైన సమయం (ఉదా., 16ms కంటే ఎక్కువ) పట్టవచ్చు, బ్రౌజర్ యొక్క ప్రధాన థ్రెడ్‌ను బ్లాక్ చేస్తుంది. ఇది UI ప్రతిస్పందించకుండా చేయడానికి, ఫ్రేమ్‌లు డ్రాప్ అవ్వడానికి, జంకీ యానిమేషన్‌లకు మరియు పేలవమైన వినియోగదారు అనుభవానికి దారితీస్తుంది.

రియాక్ట్ ఫైబర్ (రియాక్ట్ 16+) పరిచయం

ఈ సమస్యను పరిష్కరించడానికి, రియాక్ట్ బృందం కోర్ రికన్సిలియేషన్ అల్గారిథమ్‌ను పూర్తిగా తిరిగి వ్రాయడానికి బహుళ-సంవత్సరాల ప్రాజెక్ట్‌ను చేపట్టింది. రియాక్ట్ 16లో విడుదలైన ఫలితాన్ని రియాక్ట్ ఫైబర్ అని పిలుస్తారు.

ఫైబర్ ఆర్కిటెక్చర్, కాంకరెన్సీని ప్రారంభించడానికి మొదటి నుండి రూపొందించబడింది—రియాక్ట్ ఒకేసారి బహుళ పనులపై పనిచేయగల సామర్థ్యం మరియు ప్రాధాన్యత ఆధారంగా వాటి మధ్య మారగల సామర్థ్యం.

ఒక "ఫైబర్" అనేది ఒక పని యూనిట్‌ను సూచించే సాదా జావాస్క్రిప్ట్ ఆబ్జెక్ట్. ఇది ఒక కాంపోనెంట్, దాని ఇన్‌పుట్ (ప్రాప్స్), మరియు దాని అవుట్‌పుట్ (పిల్లలు) గురించి సమాచారాన్ని కలిగి ఉంటుంది. అంతరాయం కలిగించలేని పునరావృత ప్రయాణానికి బదులుగా, రియాక్ట్ ఇప్పుడు ఫైబర్ నోడ్‌ల లింక్డ్ లిస్ట్‌ను ఒకేసారి ప్రాసెస్ చేస్తుంది.

ఈ కొత్త ఆర్కిటెక్చర్ అనేక కీలక సామర్థ్యాలను అన్‌లాక్ చేసింది:

• ఇంక్రిమెంటల్ రెండరింగ్: ఇది రెండరింగ్ పనిని చిన్న భాగాలుగా విభజించి, బహుళ ఫ్రేమ్‌లలో విస్తరించగలదు.
• ప్రాధాన్యత: ఇది వివిధ రకాల అప్‌డేట్‌లకు వేర్వేరు ప్రాధాన్యత స్థాయిలను కేటాయించగలదు. ఉదాహరణకు, వినియోగదారు ఒక ఇన్‌పుట్ ఫీల్డ్‌లో టైప్ చేయడం బ్యాక్‌గ్రౌండ్‌లో డేటా ఫెచ్ చేయడం కంటే అధిక ప్రాధాన్యతను కలిగి ఉంటుంది.
• పాజ్ చేయగల సామర్థ్యం మరియు రద్దు చేయగల సామర్థ్యం: ఇది అధిక-ప్రాధాన్యత గల అప్‌డేట్‌ను నిర్వహించడానికి తక్కువ-ప్రాధాన్యత గల అప్‌డేట్‌పై పనిని పాజ్ చేయగలదు, మరియు ఇకపై అవసరం లేని పనిని రద్దు చేయగలదు లేదా తిరిగి ఉపయోగించుకోగలదు.

ఫైబర్ యొక్క రెండు దశలు

ఫైబర్ కింద, రెండరింగ్ ప్రక్రియ రెండు విభిన్న దశలుగా విభజించబడింది:

1. రెండర్/రికన్సిలియేషన్ దశ (అసింక్రోనస్): ఈ దశలో, రియాక్ట్ "వర్క్-ఇన్-ప్రోగ్రెస్" ట్రీని నిర్మించడానికి ఫైబర్ నోడ్‌లను ప్రాసెస్ చేస్తుంది. ఇది కాంపోనెంట్ `render` పద్ధతులను పిలుస్తుంది మరియు DOMకు ఏ మార్పులు చేయాలో నిర్ణయించడానికి డిఫింగ్ అల్గారిథమ్‌ను నడుపుతుంది. ముఖ్యంగా, ఈ దశ అంతరాయం కలిగించదగినది. రియాక్ట్ మరింత ముఖ్యమైన దానిని నిర్వహించడానికి ఈ పనిని పాజ్ చేసి, తర్వాత దానిని పునఃప్రారంభించగలదు. ఇది అంతరాయం కలిగించగలదు కాబట్టి, అస్థిరమైన UI స్థితిని నివారించడానికి రియాక్ట్ ఈ దశలో ఎటువంటి వాస్తవ DOM మార్పులను వర్తింపజేయదు.
2. కమిట్ దశ (సింక్రోనస్): వర్క్-ఇన్-ప్రోగ్రెస్ ట్రీ పూర్తయిన తర్వాత, రియాక్ట్ కమిట్ దశలోకి ప్రవేశిస్తుంది. ఇది లెక్కించిన మార్పులను తీసుకుని, వాటిని నిజమైన DOMకు వర్తింపజేస్తుంది. ఈ దశ సింక్రోనస్ మరియు అంతరాయం కలిగించలేనిది. ఇది వినియోగదారు ఎల్లప్పుడూ స్థిరమైన UIని చూసేలా నిర్ధారిస్తుంది. `componentDidMount` మరియు `componentDidUpdate` వంటి లైఫ్‌సైకిల్ పద్ధతులు, అలాగే `useLayoutEffect` మరియు `useEffect` హుక్స్ ఈ దశలో అమలు చేయబడతాయి.

ఫైబర్ ఆర్కిటెక్చర్, రియాక్ట్ యొక్క అనేక ఆధునిక ఫీచర్లకు పునాది. ఇందులో `Suspense`, కాంకరెంట్ రెండరింగ్, `useTransition`, మరియు `useDeferredValue` ఉన్నాయి, ఇవన్నీ డెవలపర్లు మరింత ప్రతిస్పందనాత్మక మరియు ఫ్లూయిడ్ యూజర్ ఇంటర్‌ఫేస్‌లను నిర్మించడంలో సహాయపడతాయి.

డెవలపర్‌ల కోసం ఆచరణాత్మక ఆప్టిమైజేషన్ వ్యూహాలు

రియాక్ట్ యొక్క రికన్సిలియేషన్ ప్రక్రియను అర్థం చేసుకోవడం మీకు మరింత పనితీరు గల కోడ్‌ను వ్రాయడానికి శక్తినిస్తుంది. ఇక్కడ కొన్ని ఆచరణాత్మక వ్యూహాలు ఉన్నాయి:

1. జాబితాల కోసం ఎల్లప్పుడూ స్థిరమైన మరియు ప్రత్యేకమైన కీలను ఉపయోగించండి

దీనిని ఎంత చెప్పినా తక్కువే. జాబితాల కోసం ఇది అత్యంత ముఖ్యమైన ఆప్టిమైజేషన్. మీ డేటా నుండి ఒక ప్రత్యేకమైన IDని ఉపయోగించండి (ఉదా., `product.id`). జాబితా పూర్తిగా స్టాటిక్‌గా ఉండి, ఎప్పటికీ మారకపోతే తప్ప అర్రే ఇండెక్స్‌లను ఉపయోగించడం మానుకోండి.

2. అనవసరమైన రీ-రెండర్‌లను నివారించండి

ఒక కాంపోనెంట్ దాని స్టేట్ మారినా లేదా దాని పేరెంట్ రీ-రెండర్ అయినా రీ-రెండర్ అవుతుంది. కొన్నిసార్లు, దాని అవుట్‌పుట్ ఒకేలా ఉన్నప్పటికీ ఒక కాంపోనెంట్ రీ-రెండర్ అవుతుంది. దీనిని నివారించడానికి మీరు వీటిని ఉపయోగించవచ్చు:

• `React.memo()`: ఫంక్షన్ కాంపోనెంట్ల కోసం ఒక హయ్యర్-ఆర్డర్ కాంపోనెంట్. ఇది కాంపోనెంట్ యొక్క ప్రాప్స్‌ను షాలో కంపారిజన్ చేస్తుంది. ప్రాప్స్ మారకపోతే, రియాక్ట్ కాంపోనెంట్‌ను రీ-రెండర్ చేయడాన్ని స్కిప్ చేసి, చివరిగా రెండర్ చేసిన ఫలితాన్ని తిరిగి ఉపయోగిస్తుంది.
• `useCallback()`: ఒక కాంపోనెంట్ లోపల నిర్వచించిన ఫంక్షన్‌లు ప్రతి రెండర్‌కు తిరిగి సృష్టించబడతాయి. మీరు ఈ ఫంక్షన్‌లను `React.memo`తో చుట్టబడిన చైల్డ్ కాంపోనెంట్‌కు ప్రాప్స్‌గా పంపితే, ఫంక్షన్ ప్రాప్ సాంకేతికంగా ప్రతిసారీ ఒక కొత్త ఫంక్షన్ కాబట్టి చైల్డ్ రీ-రెండర్ అవుతుంది. `useCallback` ఫంక్షన్‌నే మెమోయిజ్ చేస్తుంది, దాని డిపెండెన్సీలు మారితే మాత్రమే అది తిరిగి సృష్టించబడేలా నిర్ధారిస్తుంది.
• `useMemo()`: `useCallback` లాంటిదే, కానీ విలువల కోసం. ఇది ఒక ఖరీదైన గణన ఫలితాన్ని మెమోయిజ్ చేస్తుంది. దాని డిపెండెన్సీలలో ఒకటి మారితే మాత్రమే గణన తిరిగి అమలు చేయబడుతుంది. ప్రతి రెండర్‌పై ఖరీదైన గణనలను నివారించడానికి మరియు ప్రాప్స్‌గా పంపిన స్థిరమైన ఆబ్జెక్ట్/అర్రే రిఫరెన్స్‌లను నిర్వహించడానికి ఇది ఉపయోగపడుతుంది.

3. స్మార్ట్ కాంపోనెంట్ కంపోజిషన్

మీరు మీ కాంపోనెంట్లను నిర్మించే విధానం పనితీరుపై గణనీయమైన ప్రభావాన్ని చూపుతుంది. మీ కాంపోనెంట్ యొక్క ఒక భాగం యొక్క స్టేట్ తరచుగా అప్‌డేట్ అయితే, దానిని అప్‌డేట్ కాని భాగాల నుండి వేరు చేయడానికి ప్రయత్నించండి.

ఉదాహరణకు, తరచుగా మారే ఇన్‌పుట్ ఫీల్డ్ మొత్తం కాంపోనెంట్‌ను రీ-రెండర్ చేయడానికి కారణమయ్యే ఒక పెద్ద కాంపోనెంట్‌ను కలిగి ఉండే బదులు, ఆ స్టేట్‌ను దాని స్వంత చిన్న కాంపోనెంట్‌లోకి లిఫ్ట్ చేయండి. ఈ విధంగా, వినియోగదారు టైప్ చేసినప్పుడు చిన్న కాంపోనెంట్ మాత్రమే రీ-రెండర్ అవుతుంది.

4. పొడవైన జాబితాలను వర్చువలైజ్ చేయండి

మీరు వందలు లేదా వేల అంశాలతో జాబితాలను రెండర్ చేయవలసి వస్తే, సరైన కీలతో కూడా, వాటన్నింటినీ ఒకేసారి రెండర్ చేయడం నెమ్మదిగా ఉంటుంది మరియు చాలా మెమరీని వినియోగించుకుంటుంది. పరిష్కారం వర్చువలైజేషన్ లేదా విండోయింగ్. ఈ టెక్నిక్‌లో వ్యూపోర్ట్‌లో ప్రస్తుతం కనిపించే అంశాల యొక్క చిన్న ఉపసమితిని మాత్రమే రెండర్ చేయడం ఉంటుంది. వినియోగదారు స్క్రోల్ చేస్తున్నప్పుడు, పాత అంశాలు అన్‌మౌంట్ చేయబడతాయి మరియు కొత్త అంశాలు మౌంట్ చేయబడతాయి. `react-window` మరియు `react-virtualized` వంటి లైబ్రరీలు ఈ ప్యాటర్న్‌ను అమలు చేయడానికి శక్తివంతమైన మరియు సులభంగా ఉపయోగించగల కాంపోనెంట్లను అందిస్తాయి.

ముగింపు

రియాక్ట్ పనితీరు ప్రమాదవశాత్తు కాదు; ఇది వర్చువల్ DOM మరియు సమర్థవంతమైన రికన్సిలియేషన్ అల్గారిథమ్ చుట్టూ కేంద్రీకృతమైన ఒక ఉద్దేశపూర్వక మరియు అధునాతన ఆర్కిటెక్చర్ ఫలితం. డైరెక్ట్ DOM మానిప్యులేషన్‌ను అబ్స్ట్రాక్ట్ చేయడం ద్వారా, రియాక్ట్ మాన్యువల్‌గా నిర్వహించడం చాలా సంక్లిష్టంగా ఉండే విధంగా అప్‌డేట్‌లను బ్యాచ్ మరియు ఆప్టిమైజ్ చేయగలదు.

డెవలపర్లుగా, మనం ఈ ప్రక్రియలో ఒక కీలక భాగం. డిఫింగ్ అల్గారిథమ్ యొక్క హ్యూరిస్టిక్స్‌ను అర్థం చేసుకోవడం ద్వారా—కీలను సరిగ్గా ఉపయోగించడం, కాంపోనెంట్లు మరియు విలువలను మెమోయిజ్ చేయడం, మరియు మన అప్లికేషన్‌లను ఆలోచనాత్మకంగా నిర్మించడం ద్వారా—మనం రియాక్ట్ రికన్సిలర్‌కు వ్యతిరేకంగా కాకుండా, దానితో కలిసి పనిచేయగలం. ఫైబర్ ఆర్కిటెక్చర్‌కు పరిణామం సాధ్యమయ్యే దాని సరిహద్దులను మరింతగా ముందుకు తీసుకెళ్లింది, ఇది కొత్త తరం ఫ్లూయిడ్ మరియు ప్రతిస్పందనాత్మక UIలను సాధ్యం చేసింది.

తదుపరిసారి మీరు మీ UI ఒక స్టేట్ మార్పు తర్వాత తక్షణమే అప్‌డేట్ అవ్వడం చూసినప్పుడు, తెర వెనుక జరుగుతున్న వర్చువల్ DOM, డిఫింగ్ అల్గారిథమ్, మరియు కమిట్ దశ యొక్క సొగసైన నృత్యాన్ని ప్రశంసించడానికి ఒక క్షణం తీసుకోండి. ఈ అవగాహన ప్రపంచ ప్రేక్షకుల కోసం వేగవంతమైన, మరింత సమర్థవంతమైన మరియు మరింత దృఢమైన రియాక్ట్ అప్లికేషన్‌లను నిర్మించడానికి మీ కీలకం.